<template>
    <div style="padding-bottom: 60px">
        <cjcNav title="教师打卡" @customRouter="customRouter">
            <div class="topRight" @click="setPlan">设置计划</div>
        </cjcNav>
        <div class="pun-content" v-if="this.$store.state.NextPlan">
            <headTime class="content-top" :time="hTime"></headTime>
            <div class="content-place">
                <div class="" v-if="$store.state.address || $store.state.checkInSchool">
                    当前位置：
                    <span class="nowPlace"  v-if="$store.state.checkInSchool.result.CHECK_STATUS !== -1"  @click="toMap">{{$store.state.checkInSchool.result.CHECK_MSG}}</span>
                    <span class="nowPlace" v-else @click="toMap">{{$store.state.address}}</span>
                </div>
                <div class="" v-else>当前位置：<span class="nowPlacediandian">获取中......</span></span></div>
            </div>
            <div v-if="!$store.state.checkInSchool">
                <div class="circleStyle statusStyle0" >定位中</div>
            </div>
            <div v-else>
                <div class="content-nodata" v-if="nodata">
                    <img src="static/daka/nodata.png" alt="">
                    <div class="nodata-txt">今日无打卡计划</div>
                </div>
                <div class="content-con" v-if="!nodata">
                    <div v-if="$store.state.checkInSchool.result.CHECK_STATUS != -1">
                        <div class="circleStyle statusStyle1" v-if="this.$store.state.NextPlan.CLOCK_STATUS == -1">未开始</div>
                        <div class="circleStyle statusStyle2" v-if="this.$store.state.NextPlan.CLOCK_STATUS == 0" @click="startDaka">开始打卡</div>
                        <div class="circleStyle statusStyle3" v-if="this.$store.state.NextPlan.CLOCK_STATUS == 1" @click="endDaka">结束打卡</div>
                        <div class="circleStyle statusStyle0" v-if="this.$store.state.NextPlan.CLOCK_STATUS == 2" >已结束</div>
                        <div class="circleStyle statusStyle0" v-if="this.$store.state.NextPlan.CLOCK_STATUS == -2" >已结束</div>
                    </div>
                    <div v-else>
                        <div class="circleStyle statusStyle0">不在计划校区</div>
                    </div>
                    <div class="content-countTime">
                        <!-- <div class="countTime-txt">本周打卡时间已满</div> -->
                        <div class="countTime-txt">本周打卡时间还差<span>{{this.$store.state.NextPlan.LAST_TIME}}</span>小时</div>
                    </div>
                    <div class="content-plan">
                        <div class="planStyle">今日计划</div>
                        <div class="plan-time">
                            <div class="plan-time-con">
                                <div class="time-detail">{{ this.$store.state.NextPlan.TODAY_PLAN  }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="beizhu-area">
                        <div style="color: #0093dd;" class="btn" v-if="$store.state.NextPlan.REMARK_CONTENT == ''" @click="modal=true">添加备注</div>
                        <div v-else class="beizhu">备注：{{$store.state.NextPlan.REMARK_CONTENT}}</div>
                    </div>
                    <Modal
                        v-model="modal"
                        title="添加备注"
                        @on-ok="ok">
                        <Input v-model="beizhu" type="textarea" :rows="4" placeholder="最多输入60字符..." :maxlength="60"></Input>
                    </Modal>
                </div>
            </div>
            <div class="content-bottom" @click="tongji">查看打卡统计 ></div>
        </div>
        <Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>

<script>
export default {
    name: 'punchCard',
    data() {
        return {
            nodata: false,
            hTime: '',
            signType: '',
            isSchool: '',
            loading: false,
            modal: false,
            beizhu: '',
            isClick: false
            // punchType: this.PUNCHCARD.SIGN_STATUS,
        }
    },
    components: {
        cjcNav: () => import('../../components/common/Nav.vue'),
        headTime: () => import('../../components/common/headTime.vue'),
    },
    methods: {
        customRouter() {
            this.$cjc.closeWebView()
        },
        setPlan() {
            this.$router.push({
                name: 'installationPlanLIst'
            })
        },
        toMap() {
            this.$router.push({
                name: 'locationMap'
            })
        },
        getdakaGPS() {
            this.$cjc.apiDeviceGetGPS({
                success(data) {
                    this.$store.commit('SET_AddLA', data.result.latitude)
                    this.$store.commit('SET_AddLO', data.result.longitude)
                },
                fail(data) {
                    this.$Message.error(data.msg)
                }
            })
        },
        startDaka() {
            /**
             * 开始打卡
             */
            let Vm = this
            async function setStartSign() {
                const msg = Vm.$Message.loading({
                    content: '正在打卡...',
                    duration: 0
                })
                let getStart = await Vm.$store.dispatch('startSign', {
                    user_id: Vm.$store.state.userInfo.USER_ID,
                    plan_id: Vm.$store.state.NextPlan.PLAN_ID,
                    latitude: Vm.$store.state.getLatitude,
                    longitude: Vm.$store.state.getLonitude
                })
                msg()
                if (getStart.data.status === 0) {
                    Vm.$store.commit('SET_StartSign', getStart.data.result)
                    Vm.$store.commit('SET_CLOCK_STATUS', 1)
                } else {
                    Vm.$store.commit('SET_StartSign', 'noData')
                    Vm.$Message.warning(getStart.data.msg)
                    // this.$Message.warning('未在打卡校区，不能打卡')
                }
            }
            if (this.$store.state.checkInSchool.result.CHECK_STATUS === 0) {
                // 在计划打卡的位置
                // setStartSign()
                this.$Modal.confirm({
                    title: '确认操作',
                    content: `是否开始打卡？`,
                    onOk: setStartSign
                })
            } else {
                // 不在计划打卡的位置
                this.$Modal.confirm({
                    title: '是否开始打卡？',
                    content: `1.当前定位与计划位置不一致，本次打卡将记作无效<br>
                            2.您可选择“取消”，点击"当前位置"并手动重新定位<br>
                            3.您也可选择“确定”，填写备注信息，联系人力资源部门说明
                            `,
                    onOk: setStartSign
                })
            }
        },
        endDaka() {
            /**
             * 结束打卡
             */
            let Vm = this
            async function setEndSign() {
                const msg = Vm.$Message.loading({
                    content: '结束打卡中...',
                    duration: 0
                })
                let getEnd = await Vm.$store.dispatch('endSign', {
                    user_id: Vm.$store.state.userInfo.USER_ID,
                    plan_id: Vm.$store.state.NextPlan.PLAN_ID,
                    latitude: Vm.$store.state.getLatitude,
                    longitude: Vm.$store.state.getLonitude
                })
                msg()
                if (getEnd.data.status === 0) {
                    Vm.$store.commit('SET_EndSign', getEnd.data.result)
                    Vm.$store.commit('SET_CLOCK_STATUS', 2)
                } else {
                    Vm.$store.commit('SET_EndSign', 'noData')
                    Vm.$Message.warning(getEnd.data.msg)
                }
            }
            if (this.$store.state.checkInSchool.result.CHECK_STATUS === 0) {
                // 此处为在打卡楼栋类
                if (new Date() >= new Date(new Date().toLocaleDateString() + ` ${Vm.$store.state.NextPlan.END_TIME}`)) {
                    // 实际打卡的时间大于等于计划打卡的结束时间直接打卡
                    // setEndSign()
                    this.$Modal.confirm({
                        title: '是否结束打卡？',
                        content: `确定后，当前考勤时间段内将不再允许打卡。`,
                        onOk: setEndSign
                    })
                } else {
                    // 否则弹出提示框
                    this.$Modal.confirm({
                        title: '是否结束打卡？',
                        content: `确定后，当前考勤时间段内将不再允许打卡。`,
                        onOk: setEndSign
                    })
                }
            } else {
                // 此处表示不在计划结束打卡的位置
                this.$Modal.confirm({
                    title: '是否结束打卡？',
                    content: `
                            1.确定后，当前考勤时间段内将不再允许打卡。<br>
                            2.当前定位与计划位置不一致，本次打卡将记作无效<br>
                            3.您可选择“取消”，点击"当前位置"并手动重新定位<br>
                            4.您也可选择“确定”，填写备注信息，联系人力资源部门说明
                            `,
                    onOk: setEndSign
                })
            }
        },
        tongji() {
            this.$router.push({
                name: 'punchCardStatistics'
            })
        },
        setWeek() {
            let WEEK = this.$store.state.NextPlan.WEEK
            if (WEEK === 1) {
                return '一'
            }
            if (WEEK === 2) {
                return '二'
            }
            if (WEEK === 3) {
                return '三'
            }
            if (WEEK === 4) {
                return '四'
            }
            if (WEEK === 5) {
                return '五'
            }
            if (WEEK === 6) {
                return '六'
            }
            if (WEEK === 7) {
                return '日'
            }
        },
        /**
         * 根据用户ID获取打卡计划
         */
        async setGetNextPlan() {
            let getPlan = await this.$store.dispatch('getNextPlan', {
                userId: this.$store.state.userInfo.USER_ID,
            })
            if (getPlan.status === 0) {
                this.$store.commit('SET_NextPlan', getPlan.result)
                this.hTime = this.$store.state.NextPlan.DAY + '     星期' + this.setWeek()
                this.signType = this.$store.state.NextPlan.SIGN_STATUS
            } else {
                this.$store.commit('SET_NextPlan', 'noData')
                this.hTime = new Date().toLocaleDateString()
                // this.$Message.warning(getPlan.msg)
                this.nodata = true
            }
        },
        // 获取是否在校内打卡
        async setGetInSchool() {
            console.log(this.$store.state.NextPlan)
            let getInSchool = await this.$store.dispatch('getCheckInSchool', {
                user_id: this.$store.state.userInfo.USER_ID,
                plan_id: this.$store.state.NextPlan.PLAN_ID,
                latitude: this.$store.state.getLatitude,
                longitude: this.$store.state.getLonitude,
            })
            if (getInSchool.data.status === 0) {
                this.$store.commit('SET_checkInSchool', getInSchool.data)
            } else if (getInSchool.data.status === 1) {
                this.$store.commit('SET_checkInSchool', getInSchool.data)
            }
            this.isSchool = getInSchool.data.msg
        },
        /* eslint-disable no-undef */
        regeocoder(lnobj) {
            const Vm = this
            AMap.service('AMap.Geocoder', () => {
                let geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: 'base'
                })
                geocoder.getAddress([lnobj.LONGITUDE, lnobj.LATITUDE], function(status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        Vm.geocoder_CallBack(result)
                    }
                })
            })
        },
        geocoder_CallBack(data) {
            let address = data.regeocode.formattedAddress // 返回地址描述
            this.$store.commit('SET_address', address)
        },
        async setSchoolWeek() {
            let SchoolWeek = await this.$store.dispatch('getSchoolWeek')
            this.$store.commit('SET_SchoolWeek', SchoolWeek.result)
        },
        ok() {
            if (!this.isClick) {
                this.isClick = true
                this.$store.dispatch('remarkDay', {
                    'remark_content': this.beizhu,
                    'user_id': this.$store.state.userInfo.USER_ID,
                    'to_user_id': this.$store.state.userInfo.USER_ID,
                    day: this.$store.state.NextPlan.DAY
                }).then(res => {
                    this.isClick = false
                    if (res.data.status === 0) {
                        this.$store.state.NextPlan.REMARK_CONTENT = this.beizhu
                        // this.info[2].REMARK_CONTENT = this.beizhu
                    } else {
                        this.$Message.error(res.data.msg)
                    }
                })
            }
        }
    },
    created() {
        this.$Message.config({
            top: 200,
            duration: 3
        })
        let Vm = this
        // let State = Vm.$store.state
        // 执行步骤
        Vm.loading = true
        async function Step() {
            await Vm.setGetNextPlan()
            Vm.loading = false
            // 获取经纬度
            Vm.$cjc.apiDeviceGetGPS({
                success(data) {
                    Vm.setSchoolWeek()
                    Vm.$store.commit('SET_AddLA', data.result.LATITUDE)
                    Vm.$store.commit('SET_AddLO', data.result.LONGITUDE)
                    Vm.setGetInSchool()
                    Vm.regeocoder(data.result)
                },
                fail(data) {
                    Vm.$Modal.error({
                        title: '错误',
                        content: `定位失败。请检查手机设置，是否对TFinfo开启了定位权限。`
                    })
                }
            })
        }
        Vm.$store.dispatch('isUserInfo').then(res => {
            Step()
        })
    },
}
</script>

<style lang="less">
.topRight {
    color: #0093dd;
    margin: 0 15px 0 0;
    font-size: 14PX;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pun-content {
    width: 100%;
    // display: flex;
    // flex-direction: column;
    /* align-items: center; */
}
.content-top {
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to left, #209cff 0%, #68e0cf 100%);
    color: #fff;
    font-size: 16px;
}
.content-place {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;

}

.nowPlace {
    text-decoration: underline;
    color: #0093dd;
    
}
.nowPlacediandian {
    width:100px;
    height:100px;
    opacity: 1;
    animation:myfirst 2s linear infinite;
}
@keyframes myfirst
{
  0%   {opacity:1;}
  25%  {opacity:.5;}
  50%  {opacity:.1;}
  75% {opacity:.5;}
  100% {opacity:1;}
}
.content-nodata{
    width: 100%;
    margin-top: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
        height: 60px;
        margin: 10px;
    }
    .nodata-txt {
        font-size: 14px;
        color: #999999;
    }
}
.content-con {
    width: 100%;
    
}
.con-circle {
    margin: 20px 0;
}
.circleStyle {
    margin: 30px auto;
    width: 150px;
    height:150px;
    border-radius: 50%;
    // border: 6px solid #1AA1E1;
    /* display: inline-block; */
    box-sizing: border-box;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    // color:#0093dd;
}
.statusStyle0 {
    border: 6px solid #cccccc;
    color:#cccccc;
}
.statusStyle1 {
    border: 6px solid #f8e7d1;
    color:#f7b55d;
}
.statusStyle2 {
    border: 6px solid #d1e0f7;
    color:#0093dd;
}
.statusStyle3 {
    border: 6px solid #c0eadf;
    color:#17c295;
}
.content-plan {
    width: 100%;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
}
.beizhu-area{
    padding: 10px 20px;
    background-color: #ffffff;
    .btn{
        text-align: center;
    }
}
.planStyle {
    display: flex;
    justify-content: center;
    font-size: 14px;
    color: #999999;
    padding: 10px;
    width: 100%;
}
.plan-time {
    padding: 10px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
}
.plan-time-con {
    /* width: 50%; */
    display: flex;
    align-items: center;
    justify-content: center;

    .time-detail {
        // background-color: #0093dd;
        // color: #fff;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
    }
}
.content-countTime {
    width: 100%;
    display: flex;
    padding-bottom: 10px;
    align-items: center;
    justify-content: center;
}
.countTime-txt {
    color: #232323;
    span {
        font-size: 16px;
        margin: 8px;
        color: #0093dd;
    }
}
.content-bottom {
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    color: #0093dd;
    background-color: #fff;
    border-top: 1px solid #eeeeee;
}
</style>
